<template>
  <div>
    <!-- <el-table
      :data="songPartList"
      stripe
      style="width: 100%"
      @cell-mouse-enter="handleHover"
      highlight-current-row

    >
      <el-table-column prop="index" label="序号" width="80"> </el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="歌曲" width="180"> </el-table-column>
      <el-table-column class='songTab' show-overflow-tooltip prop="singer[0].name" label="歌手"> </el-table-column>
      <el-table-column show-overflow-tooltip prop="album.name" label="专辑"> </el-table-column>
      <el-table-column prop="duration" align="right" label="时长">
      </el-table-column>
    </el-table> -->
    <!-- 歌曲展示列表 -->
    <div class="songTab">
      <table class="songs-list-main" :style="{ height: height + 'px' }">
        <!-- 头部显示标题 -->
        <tr class="list-header flex">
          <td class="columnIndex">序号</td>
          <td class="columnSong">歌曲</td>
          <td class="columnSinger">歌手</td>
          <td class="columnAlbum" v-if="typeSize !== 'mini'">专辑</td>
          <td class="columnTime">时长</td>
        </tr>
        <div class="list-scroll" ref="curSongRef">
          <div class="list-main" v-if="song.length > 0" :style="curSongSty">
            <div
              v-for="(item, index) in songPartList"
              :key="item.id"
              :class="isCruSong(item, index)"
            >
              <!-- 序号 -->
              <div class="columnIndex">
                <span class="songlist-index">{{ indexMethod(index) }}</span>
                <!-- <div class="audio-icon">
                  <div class="column" style="animation-delay: -1.2s"></div>
                  <div class="column"></div>
                  <div class="column" style="animation-delay: -1.5s"></div>
                  <div class="column" style="animation-delay: -0.9s"></div>
                  <div class="column" style="animation-delay: -0.6s"></div>
                </div> -->
                <i :class="playIcon(item)" @click="songPlsyOrPause(item)"></i>
              </div>
              <!-- 歌名 -->
              <div class="columnSong songlist-name">
                <router-link
                  :class="typeSize"
                  :to="{ path: '/song', query: { id: item.id } }"
                >
                  {{ item.name }}
                </router-link>
                <template v-if="typeSize !== 'mini'">
                  <router-link
                    class="mv-name"
                    :to="{ path: '/mvPlay', query: { id: item.mvId } }"
                    v-if="item.mvId"
                  >
                    <i class="iconfont icon-video"></i>
                  </router-link>
                  <i class="iconfont icon-vip" v-if="item.vip"></i>
                </template>
              </div>
              <div class="columnSinger songlist-singer">
                <!--- 返回的数据里用户的uid有可能为0 --->

                 <router-link
                  :to="{ path: '/singer', query: { id: author.id } }"
                  class="song_name"
                  v-for="(author, con) in item.singer"
                  :key="author.id"
                  >{{
                    con !== 0 ? "/" + author.name : author.name
                  }}</router-link
                >
              </div>
              <div class="columnAlbum" v-if="typeSize !== 'mini'">
                <router-link
                  class="songlist-album"
                  :to="{ path: '/album', query: { id: item.album.id } }"
                  >{{ item.album.name }}</router-link
               >
              </div>
              <div class="columnTime">
                <div class="songlist-time">{{ item.duration }}</div>
                <div class="songlist-oper">
                  <i
                    class="iconfont icon-add"
                    title="添加到列表"
                    v-if="typeSize !== 'mini'"
                    @click="addSongList(item)"
                  ></i>
                  <el-popover
                    placement="bottom"
                    trigger="click"
                    ref="popAddList"
                  >
                    <i
                      class="iconfont icon-add-list"
                      title="添加到歌单"
                      slot="reference"
                    ></i>
                    <!-- <add-list :tracks="item.id" @closeAddListPop="closeAddListPop"></add-list> -->
                  </el-popover>
                  <i class="iconfont icon-collect"></i>
                  <!-- <i class="iconfont icon-del" title="删除"></i> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </table>
    </div>
    <!-- 分页器 -->
    <div class="pagination" v-if="isShowPagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="this.song.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";

export default {
  name: "SongList",
  data() {
    return {
      pageSize: 30,
      // 当前页面标识
      currentPage: 1,
      // 页面渲染的歌曲数组
      // songPartList: [],
      // 播放列表
      // playingList: []
       curScroll: -1 || 1
    };
  },
  props: {
    song: {
      type: Array,
      required: true,
    },
    // 页面条纹
    stripe: {
      type: Boolean,
      default: false,
    },
    // 是否为无限下拉
    isScroll: {
      type: Boolean,
      default: false,
    },
    offSet: {
      type: Number,
      default: 0,
    },
    typeSize: {
      type: String,
      default: "normal",
    },
    height: {
      type: [Number, String],
      default: "auto",
    },
    isShowTips: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    ...mapActions(["selectPlay", "addList"]),
    ...mapMutations({
      setPlayStatus: "SET_PLAYSTATUS",
      setPlayList: "SET_PLAYLIST",
      setPlayListTips: "setPlayListTips",
      setPlayIndex: "SET_PLAYINDEX",
    }),
    // 将歌曲添加到播放列表
    addSongList(item) {
      this.addList({ list: [item] });
      // 如果已经添加了 就提示用户
      if (this.isShowTips) {
        this.setPlayListTips({ flag: true, Text: "已添加到播放列表" });
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.setPlayListTips({ flag: false, Text: "已添加到播放列表" });
        }, 500);
      }
    },
    // 控制播放歌曲
    songPlsyOrPause(item) {
      // console.log("songPlsyOrPause", item);
      if (!this.curSongInfo || item.id !== this.curSongInfo.id) {
        this.selectPlay({ list: [item] });
        if (this.isShowTips) {
          this.setPlayListTips({ flag: true, Text: "已开始播放" });
          clearTimeout(this.timer);
          this.timer = setTimeout(() => {
            this.setPlayListTips({ flag: false, Text: "已开始播放" });
          }, 500);
        }
      } else {
        this.setPlayStatus(!this.isPlayed);
      }
    },
    // 歌曲是否选中 是否有特殊标识
    isCruSong(item, index) {
      /* const that = this;
      return (item, index) => { */
      return [
        "list-item",
        // 判断是否该存在条纹
        this.stripe ? (index % 2 === 0 ? "stripe" : "") : "",
        // 判读是否存在许可证书或者是否VIP判断是否可以播放
        item.license || item.vip ? "disable" : "",
        // 存在VIP就添加VIP标识
        item.vip ? "vip" : "",
      ];

      // };
    },
    // 计算歌曲列表序号
    indexMethod(page) {
      // 如果不是无限下拉界面就使用需要计算
      if (!this.isScroll) {
        return (this.currentPage - 1) * this.pageSize + page + 1 + this.offSet;
      } else {
        return page + 1;
      }
    },
    // 序号的图标处理函数
    playIcon(item) {
      /* const that = this */
      /* return () => { */
      return [
        "iconfont",
        "playicon",
        this.isPlayed && item.id === this.curSongInfo.id
          ? "icon-pause"
          : "icon-play",
      ];
      /* } */
    },
    // 滚动到当前播放音乐的位置
    scrollCurSong(cur) {
      console.log('scroll')
      const self = this;
      if (self.isScroll) {
        const curIndex = self.song.findIndex((item) => {
          return item.id === cur.id;
        });

        if (curIndex > 7 && curIndex < self.song.length - 8) {
          self.curScroll = -(curIndex - 4) * 50;
        } else if (
          curIndex >= self.song.length - 8 &&
          self.song.length - 8 > 0
        ) {
          self.curScroll = -(self.song.length - 8) * 50;
        } else {
          self.curScroll = 0;
        }
        self.$refs.curSongRef.addEventListener("wheel", (event) => {
          if (event.wheelDelta > 0 || event.detail < 0) {
            self.curScroll =
              Math.abs(self.curScroll) > 0 ? self.curScroll + 50 : 0;
          } else {
            self.curScroll =
              Math.abs(self.curScroll) < ((self.song.length - 8) / 2) * 100
                ? self.curScroll - 50
                : self.curScroll;
          }
        });
      }
    },
    // 处理显示项的函数
    /*  calculateList(currentPage, pageSize) {
      let start;
      let end;
      if (currentPage === 1) {
        start = currentPage - 1;
      } else {
        start = pageSize * (currentPage - 1);
      }
      // 结束的坐标位置
      end = pageSize * currentPage;

      this.songPartList = this.song.slice(start, end);

    }, */
    // 切换分页器
    /* currentChange(currentPage) {
      this.calculateList(currentPage, this.pageSize);
    }, */
  },
  mounted() {
    /* this.song = song */
    // 处理传递过来的数组一页显示30条
    /* this.calculateList(this.currentPage, this.pageSize); */
    // console.log(this.song)
    // console.log(this.songPartList);
    console.log(this.isShowPagination);
    this.scrollCurSong(this.curSongInfo);
  },
  watch: {
    /* song(id){
      console.log("watch",id);
    }, */
    curSongInfo: {
      handler(val, oldVal) {
        this.scrollCurSong(val);
      },
      deep: true,
    },
    song() {
      this.currentPage = 1;
    },
  },
  computed: {
    ...mapGetters(["playList", "playIndex", "isPlayed"]),
    songPartList() {
      if (this.song.length <= 0) {
        return [];
      }
      // 如果不是在可以下拉刷新的界面就分页显示
      if (!this.isScroll) {
        // console.log(1111,this.song)
        return this.song.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      } else {
        return this.song;
      }
    },
    // 滚动条样式动态监听
    curSongSty() {
      return `transform: translateY(${this.curScroll}px)`;
    },
    // 分页器在界面歌曲总数小于pageSize时不显示
    isShowPagination() {
      return this.song.length > this.pageSize;
    },
    // 对应播放歌曲的信息
    curSongInfo() {
      let sda = this.playList[this.playIndex];
      console.log("currentSong", sda);
      return sda;
    },
    // 判断是否显示分页器
    isShowPagination() {
      return this.song.length > this.pageSize && !this.isScroll;
      // return false
    },
  },
};
</script>

<style lang='less' scoped>
.songs-list-main {
  font-size: 14px;
}
.list-header {
  display: flex;
  line-height: 50px;
  border-bottom: 1px solid #ebeef5;
  font-weight: bold;
  color: #999;
}
.columnIndex {
  width: 70px;
  line-height: 50px;
  padding-left: 10px;
}
.columnSong {
  display: flex;
  width: 220px;
  // flex: 1.5;
  padding-right: 10px;
  overflow: hidden;
  align-items: center;
}
.columnSinger {
  width: 200px;
  // flex: 1.8;
  padding-right: 10px;
  overflow: hidden;
}
.columnAlbum {
  width: 180px;
  // flex: 1.8;
}
.columnTime {
  width: 160px;
  // flex: 1.2;
  padding-right: 10px;
  text-align: right;
}
.list-scroll {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  overflow-y: hidden;
}
.list-main {
  transition: transform 0.3s;
}
.list-item {
  display: flex;
  line-height: 0;

  .iconfont {
    margin-left: 10px;
    font-size: 22px;
    cursor: pointer;

    &:hover {
      color: #c02a2a;
    }
  }

  .songlist-index {
    display: inline-block;
    width: 24px;
    text-align: center;
  }

  .playicon {
    display: none;
    margin-left: 0;
  }

  .songlist-name {
    a {
      display: inline-block;
      max-width: 60%;
      line-height: 50px;
      color: #333;
      text-decoration: none;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      vertical-align: top;
    }

    .mini {
      max-width: 100%;
    }

    i:hover {
      color: #c02a2a;
      cursor: pointer;
    }
  }

  .songlist-singer,
  .songlist-album {
    display: inline-block;
    max-width: 100%;
    line-height: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #333;
    a {
      text-decoration: none;
      color: #333;
    }
  }
  .songlist-time {
    line-height: 50px;
  }

  .songlist-oper {
    display: none;
    line-height: 50px;
  }

  &.stripe {
    background: #fafafa;
  }

  &.active {
    background: #f0f0f0;

    .songlist-index,
    .playicon {
      display: none;
    }

    .audio-icon {
      display: flex;
    }

    &:hover {
      .playicon {
        display: block;
        color: #c02a2a;
      }
      .audio-icon {
        display: none;
      }
    }
  }

  &:hover {
    background: #f0f0f0;

    .songlist-time,
    .songlist-index {
      display: none;
    }

    .songlist-oper,
    .playicon {
      display: block;
    }
  }

  .icon-vip {
    font-size: 30px;
    color: #f50b0b;
  }

  &.disable {
    color: #ccc;

    a {
      color: #ccc;
    }

    .playicon,
    .songlist-oper {
      display: none;
    }

    .songlist-index,
    .songlist-time {
      display: block;
    }
  }

  &.vip {
    color: #c02a2a;

    a {
      color: #c02a2a;
    }
  }
}

.song-list {
  .songlist-singer {
    display: inline-block;
    width: 100px;
    height: 23px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .songlist-name {
    width: 210px;

    a {
      display: inline-block;
      text-decoration: none;
      max-width: 185px;
      height: 23px;
      margin-right: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    i:hover {
      color: #c02a2a;
      cursor: pointer;
    }
  }

  .songlist-oper {
    display: none;

    .iconfont {
      margin-left: 15px;
      font-size: 22px;
      cursor: pointer;

      &:hover {
        color: #c02a2a;
      }
    }
  }
}
.pagination {
  padding: 50px 0 0;
  text-align: center;
  z-index: 10;
}
</style>
